<script setup>
	import {
		reactive
	} from 'vue'
	import {
		jumpTo,
		back
	} from '@/utils/common.js'
	import http from '@/api/roomAPI.js'
	import userAPI from '@/api/userAPI'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({
		maxlength: 1000,
		ask: '',
		days: 0,
		dialog: false,
		examination: [],
		reviewInfo: {}
	})

	async function examination() {
		if (data.days > 0) {
			const res = await http.examination(data.days)
			const rows = Array.from(res.data).map((item) => {
				if (item.type === 2) {
					// item.value = ''
					item.contents = []
					for (const key in item.content) {
						if (Object.prototype.hasOwnProperty.call(item.content, key)) {
							item.contents.push({
								key: key,
								val: item.content[key],
							})
						}
					}
				} else {
					if (item.value) {

					} else {
						item.value = ''
					}
				}

				return item
			})
			data.examination = rows

			const res2 = await userAPI.getExaminationInfo(data.days)

			data.reviewInfo = res2.data;

			// if(data.reviewInfo.is_qualified == 2)

			data.dialog = data.reviewInfo.is_qualified == 2;

		} else {
			const res1 = await userAPI.examinationInfo();
			const rows1 = Array.from(res1.data.value).map((item) => {

				if (item.type === 2) {
					// item.value = ''
					item.contents = []
					for (const key in item.content) {
						if (Object.prototype.hasOwnProperty.call(item.content, key)) {
							item.contents.push({
								key: key,
								val: item.content[key],
							})
						}
					}
				} else {
					if (item.value) {

					} else {
						item.value = ''
					}
				}
				return item
			})
			data.examination = rows1;
			data.reviewInfo = res1.data.examination;

			// if(data.reviewInfo.is_qualified == 2)

			data.dialog = data.reviewInfo.is_qualified == 2;
		}
	}

	async function submit() {
		const res = await http.submit(
			data.days,
			data.examination.map((item) => {

				if (item.value) {
					return {
						parent_id: item.id,
						value: item.value,
					}
				} else {
					return {
						parent_id: item.id,
						value: ''
					}
				}


			})
		)

		if (res.status === 0) {

			uni.showModal({
				title: '提示',
				content: '提交成功',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						back()
					}
				}
			});

			//      uni.showToast({
			//          title: '提交成功',
			//          icon: 'none',
			//          success: () => {

			// },
			//      })
		}
	}

	onLoad(async (options) => {
		data.days = +options.days;
		await examination()
	})
</script>

<template>
	<uni-header />

	<view class="header">
		<!-- <image class="back" @click="back" src="/static/icon/back.png" mode="aspectFit" /> -->
		<uni-icons class="back" type="back" @click="back" size="24" color="#828282"></uni-icons>

		<image src="/static/icon/function1.png" mode="aspectFit" />

		<view class="txt">
			<view>所需定制方向与需求深度填写</view>
			<text>Fill in the required customization\n direction and depth of requirements</text>
		</view>

	</view>

	<scroll-view scroll-y class="main">
		<view style="height: 44rpx" />
		<template v-for="(item, i) in data.examination" :key="item.id">
			<view class="type" v-if="item.type === 2">
				<!-- <text class="title">{{ item.title }}</text> -->
				<view class="title">
					<u-parse :html="item.title"></u-parse>
				</view>

				<view class="content">
					<!-- 					<text :class="{ isActive: item.value === subitem.key }" v-for="subitem in item.contents"
						:key="subitem.key" @click="item.value = subitem.key">{{ subitem.val }}</text> -->

					<u-radio-group v-model="item.value" active-color="#dfaf0f" :wrap="true">
						<u-radio label-size="18" v-for="(row, index) in item.content" :key="index" :name="''+index">
							<view :class=" { isActive: item.value !='' && item.value == index }">
								<view style="padding: 6rpx 10rpx 6rpx 10rpx;">
									{{row}}
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="question-box" v-else>
				<!-- <text class="question"> {{ item.title }} \n {{ item.content }} </text> -->
				<view class="question">
					<u-parse :html="item.title"></u-parse>
				</view>
				<view class="textarea__field">
					<textarea class="ask" v-model="item.value" :maxlength="data.maxlength"
						placeholder-style="color:#bebebe;font-weight: 400;" placeholder="未填或只填空格、符号、表情、数字则需求无法提交" />
					<text class="textarea__count">{{ item.value.length }}/{{ data.maxlength }}</text>
				</view>
			</view>


			<!-- 	<view class="uv-divider__dot">
				<text>●</text>
			</view> -->

			<!-- 			<view class="uv-divider__dot">
				<text>•</text>
			</view> -->

			<view v-if="i<data.examination.length-1" class="center-absolute">
				<view class="dot">.</view>
			</view>



			<!-- 			<view style="display: table-cell; vertical-align: middle; text-align: center;">
				<text style="font-size: 40rpx;">.</text>
			</view> -->

<!-- 			<view class="uv-divider__dot">
				<text style="font-size: 40rpx;line-height: 1;">.</text>
			</view> -->

			<!-- <u-line color="#c9c9c9" length="40rpx"  margin="16rpx auto"  /> -->


			<!-- <u-divider color="#c9c9c9" half-width="50" fontSize="40" border-color="#c9c9c9">.</u-divider> -->

			<!-- <u-divider color="#c9c9c9" half-width="0" fontSize="40">.</u-divider> -->

			<!-- <u-line color="#d9d9d9" margin="16rpx auto" /> -->

		</template>
	</scroll-view>

	<view class="footer" @click="submit">
		<image src="/static/icon/function1.png" mode="aspectFit" />
		<text>提交</text>
	</view>

	<view class="dialog" v-if="data.dialog">
		<text class="title">需求被驳回</text>
		<text>驳回原因：{{data.reviewInfo.reason}}</text>
		<text class="tip">请重新填写需求</text>
		<text class="btn" @click="data.dialog = false">OK</text>
	</view>
</template>

<style lang="scss" scoped>
	.center-absolute {
		position: relative;
		height: 40rpx;
		/* 保证容器的高度 */

	}


	.center-absolute .dot {
		position: absolute;
		top: 15%;
		left: 50%;
		font-size: 40rpx;
		line-height: 1;
		color:#c9c9c9;
		transform: translate(-50%, -50%);
	}






	.uv-divider__dot {
		text-align: center;
		padding: 16rpx 0;
		color: #d9d9d9;
	}

	.u-line {
		width: 100rpx;
	}

	.header {
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		>image {
			width: 87rpx;
			height: 87rpx;
		}

		.txt {
			margin-left: 10rpx;
			color: #000;
			font-size: 20rpx;
			font-weight: 400;
			line-height: 1.2;
			text-align: left;

			>text {
				font-size: 16rpx;
			}
		}


		.back {
			margin-left: 44rpx;
			margin-right: 90rpx;
			padding: 8rpx;
			// width: 22rpx;
			// height: 22rpx;
		}
	}

	.main {
		padding-bottom: 180rpx;
		height: calc(100% - 346rpx);
		box-sizing: border-box;

		.type {
			padding: 40rpx 40rpx 40rpx 40rpx;

			.title {
				display: block;
				color: #000;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}

			.content {
				// display: grid;
				// grid-template-columns: 133rpx 1fr 133rpx;
				// justify-items: center;
				// ===========
				display: flex;
				justify-content: flex-start;
				column-gap: 60rpx;
				flex-wrap: wrap;
				// ===========
				// margin: 66rpx 0 0 50rpx;

				:deep(.u-radio) {
					padding: 10rpx 0;
					color: rgb(0, 0, 0);
					font-weight: 600;

					.isActive {
						color: rgb(223, 175, 15);
						// border-radius: 9rpx;
						// background: rgb(223, 175, 15);
					}
				}

				>text {
					padding: 0 18rpx;
					margin-bottom: 40rpx;
					// width: 133rpx;
					height: 47rpx;
					border-radius: 9rpx;
					background: rgb(242, 242, 242);
					color: #000;
					font-size: 16rpx;
					font-weight: 400;
					line-height: 47rpx;
					text-align: center;

					&.isActive {
						border-radius: 9rpx;
						color: #fff;
						background: rgb(223, 175, 15);
					}
				}
			}
		}

		.question-box {
			padding: 40rpx 40rpx 40rpx 40rpx;

			.question {
				display: block;
				color: #000;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 26rpx;
				text-align: left;
			}

			.ask {
				padding: 10rpx;
				margin-top: 36rpx;
				display: block;
				width: 100%;
				height: 313rpx;
				box-sizing: border-box;
				border: 0.5rpx solid rgb(193, 193, 193);
				color: #666;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
				box-sizing: border-box;
			}
		}


		.textarea__field {
			position: relative;
			// flex: 1;
			// font-size: 15px;
			// color: $wu-content-color;
			// background: transparent;
			// width: 100%;
		}

		.textarea__count {
			position: absolute;
			right: 5px;
			bottom: 2px;
			font-size: 12px;
			// background-color: #fff;
			padding: 1px 4px;
		}

	}

	.footer {
		display: flex;
		justify-content: center;
		padding-top: 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 180rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #D3D3D3;
		background: rgb(255, 255, 255);
		z-index: 990;

		>image {
			width: 87rpx;
			height: 87rpx;
		}

		>text {
			margin-left: 17rpx;
			color: #000;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 87rpx;
			text-align: center;
		}
	}

	.dialog {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 500rpx;
		left: 50%;
		margin-left: -280rpx;
		z-index: 999;
		padding: 31rpx 96rpx 50rpx 84rpx;
		width: 560rpx;
		height: 415rpx;
		border-radius: 69rpx;
		background: rgb(192, 0, 3);

		&::after {
			position: fixed;
			top: 0;
			left: 0;
			display: block;
			content: '';
			width: 100vw;
			height: 100vh;
			z-index: -1;
		}

		>text {
			display: block;
			color: rgb(255, 255, 255);
			font-size: 16rpx;
			font-weight: 600;
			line-height: 1.5;
			text-align: left;
		}

		>.title {
			margin-bottom: 30rpx;
			text-align: center;
		}

		.tip {
			margin-top: auto;
			margin-bottom: 28rpx;
			text-align: center;
		}

		>.btn {
			display: block;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 1;
			text-align: center;
		}
	}
</style>